<template>
  <div class="points-detail-container">
    <div class="filter-section">
      <div class="filter-item">
        <span class="filter-label">积分变动:</span>
        <el-select v-model="selectedOperateType" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="新增" value="add"></el-option>
          <el-option label="扣减" value="reduce"></el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <span class="filter-label">渠道:</span>
        <el-select
          v-model="selectedChannel"
          placeholder="请选择"
          filterable
          remote
          :remote-method="filterChannels"
          :loading="loadingChannels"
          @change="updateChannelSubOptions"
        >
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="channel in filteredChannels"
            :key="channel.channel"
            :label="channel.channelDesc"
            :value="channel.channel"
          ></el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <span class="filter-label">渠道子类型:</span>
        <el-select
          v-model="selectedChannelSubType"
          placeholder="请选择"
          filterable
          remote
          :remote-method="filterChannelSubs"
          :loading="loadingChannelSubs"
        >
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="channelSub in filteredChannelSubs"
            :key="channelSub.channelSub"
            :label="channelSub.channelSubDesc"
            :value="channelSub.channelSub"
          ></el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <span class="filter-label">用户ID:</span>
        <el-input v-model="userId" placeholder="请输入用户ID"></el-input>
      </div>
      <el-button type="primary" @click="searchPointsDetails">搜索</el-button>
    </div>
    <div class="table-section">
      <el-table :data="mappedPointsDetails" style="width: 100%">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
        <el-table-column prop="points" label="积分值" width="120"></el-table-column>
        <el-table-column label="操作类型" width="120">
          <template slot-scope="scope">
            <span :class="getOperateTypeClass(scope.row.operateType)">{{ getOperateTypeText(scope.row.operateType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="channelDesc" label="渠道" width="120"></el-table-column>
        <el-table-column prop="channelSubDesc" label="渠道子类型" width="150"></el-table-column>
        <el-table-column prop="description" label="备注" width="180"></el-table-column>
        <el-table-column prop="previousPoints" label="更新前积分值" width="150"></el-table-column>
        <el-table-column prop="currentPoints" label="更新后积分值" width="150"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      </el-table>
    </div>
    <div class="pagination-section">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pointsDetails.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        style="margin-top: 20px; text-align: center;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import requestUtil from '../../network/request'

export default {
  name: 'PointsDetailList',
  data() {
    return {
      selectedOperateType: '',
      selectedChannel: '',
      selectedChannelSubType: '',
      userId: '',
      channels: [],
      channelSubOptions: [],
      pointsDetails: [],
      filteredPointsDetails: [],
      filteredChannels: [],
      filteredChannelSubs: [],
      currentPage: 1,
      pageSize: 10,
      loadingChannels: false,
      loadingChannelSubs: false,
    };
  },
  mounted() {
    this.fetchChannels();
    this.fetchPointsDetails();
  },
  computed: {
    mappedPointsDetails() {
      return this.filteredPointsDetails.map(detail => {
        const channel = this.channels.find(channel => channel.channel === detail.channel);
        const channelSub = channel ? channel.channelSubList.find(sub => sub.channelSub === detail.channelSubType) : null;
        return {
          ...detail,
          channelDesc: channel ? channel.channelDesc : detail.channel,
          channelSubDesc: channelSub ? channelSub.channelSubDesc : detail.channelSubType,
        };
      });
    },
  },
  methods: {
    fetchChannels() {
      requestUtil.post('/pointsChannel/list', {}).then(res => {
        if (res.code === '0') {
          this.channels = res.result.pointsChannelDetails;
          this.filteredChannels = this.channels;
          this.updateChannelSubOptions();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    updateChannelSubOptions() {
      if (this.selectedChannel) {
        const selectedChannelDetail = this.channels.find(channel => channel.channel === this.selectedChannel);
        this.channelSubOptions = selectedChannelDetail ? selectedChannelDetail.channelSubList : [];
        this.filteredChannelSubs = this.channelSubOptions;
      } else {
        // 当没有选择具体渠道时，包含所有子渠道选项
        this.channelSubOptions = this.channels.flatMap(channel => channel.channelSubList);
        this.filteredChannelSubs = this.channelSubOptions;
      }
    },
    fetchPointsDetails() {
      const params = {
        userId: this.userId,
        channel: this.selectedChannel,
        channelSubType: this.selectedChannelSubType,
        operateType: this.selectedOperateType,
        currentPage: this.currentPage,
        size: this.pageSize,
      };

      requestUtil.post('/pointsDetail/list', params).then(res => {
        if (res.code === '0') {
          this.pointsDetails = res.result.pointsDetails;
          this.filteredPointsDetails = res.result.pointsDetails;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    searchPointsDetails() {
      this.currentPage = 1; // 重置当前页为第一页
      this.fetchPointsDetails();
    },
    getOperateTypeClass(operateType) {
      switch (operateType) {
        case 'add':
          return 'operate-type-add';
        case 'reduce':
          return 'operate-type-reduce';
        default:
          return '';
      }
    },
    getOperateTypeText(operateType) {
      switch (operateType) {
        case 'add':
          return '新增';
        case 'reduce':
          return '扣减';
        default:
          return '未知操作';
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchPointsDetails();
    },
    filterChannels(query) {
      if (query !== '') {
        this.loadingChannels = true;
        setTimeout(() => {
          this.loadingChannels = false;
          this.filteredChannels = this.channels.filter(channel => channel.channelDesc.toLowerCase().includes(query.toLowerCase()));
        }, 200);
      } else {
        this.filteredChannels = this.channels;
      }
    },
    filterChannelSubs(query) {
      if (query !== '') {
        this.loadingChannelSubs = true;
        setTimeout(() => {
          this.loadingChannelSubs = false;
          if (this.selectedChannel) {
            this.filteredChannelSubs = this.channelSubOptions.filter(channelSub => channelSub.channelSubDesc.toLowerCase().includes(query.toLowerCase()));
          } else {
            this.filteredChannelSubs = this.channels.flatMap(channel => channel.channelSubList).filter(channelSub => channelSub.channelSubDesc.toLowerCase().includes(query.toLowerCase()));
          }
        }, 200);
      } else {
        this.filteredChannelSubs = this.channelSubOptions;
      }
    },
  },
};
</script>

<style scoped>
.points-detail-container {
  padding: 20px;
}

.filter-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.filter-label {
  margin-right: 10px;
}

.filter-section .el-select {
  width: 150px;
}

.filter-section .el-input {
  width: 200px;
}

.filter-section .el-button {
  margin-left: 10px;
}

.table-section {
  width: 100%;
}

.operate-type-add {
  color: #28a745;
}

.operate-type-reduce {
  color: #dc3545;
}

.pagination-section {
  margin-top: 20px;
  text-align: center;
}
</style>
